/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, ScrollView,
} from "react-native";

import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import BasePage from "../widget/common/BasePage";
import CommonRowItem from "../widget/common/CommonRowItem";
import HolderImage from "../widget/common/HolderImage";
import Button from "../widget/common/NCButton";
import NetWorkUtil from "../utils/NetWorkUtil";
import { isEmpty } from "../utils/utils";

let recycleValues;
let deviceInfo;
let accessInfo;
let callback;

export default class AccessResultInfo extends Component {
  constructor(props) {
    super(props);
    recycleValues = NavigatorUtil.getPageParam(props, "recycleValues");
    deviceInfo = NavigatorUtil.getPageParam(props, "deviceInfo");
    accessInfo = NavigatorUtil.getPageParam(props, "accessInfo");
    callback = NavigatorUtil.getPageParam(props, "callback");
  }

  render() {
    return (
      <BasePage style={styles.container}>
        <ScrollView style={styles.container}>
          <View style={styles.deviceInfoContainer}>
            <HolderImage source={{ uri: NetWorkUtil.getFileUrl(deviceInfo.facility_src) }} style={styles.image} />
            <View style={styles.deviceContentContainer}>
              <Text style={styles.devicename}>{`${isEmpty(deviceInfo.brand_name) ? "" : deviceInfo.brand_name} ${
                deviceInfo.facility_name
              }`}
              </Text>
              <Text style={styles.textdesc}>预估回收价格：</Text>
              <Text style={styles.textlogo}>
                ￥<Text style={styles.textPrice}>{accessInfo.facility_recycle_price}</Text>
              </Text>
            </View>
          </View>
          <View style={styles.contentContainer}>
            {recycleValues.map((item, index) => {
              const values = [];
              const { recycleInfo } = item;
              for (let i = 0; i < recycleInfo.length; i += 1) {
                values.push(recycleInfo[i].child_lable_name);
              }
              return (
                <CommonRowItem
                  name={item.lable_name}
                  value={values.join(";")}
                  key={String(callback ? item.recycle_lable_id : item.lable_id)}
                />
              );
            })}
            {callback && (
              <Button
                buttonStyle={styles.button}
                textStyle={styles.buttonText}
                title="重新评估"
                onPress={() => NavigatorUtil.goReAccess()}
              />
            )}
          </View>
        </ScrollView>
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  deviceInfoContainer: {
    marginBottom: scale * 8,
    width: ScreenWidth,
    height: scale * 130,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: scale * 16,
    backgroundColor: Color.white,
  },
  contentContainer: {
    width: ScreenWidth,
    marginBottom: scale * 8,
    backgroundColor: Color.white,
    paddingTop: scale * 24,
    paddingBottom: scale * 40,
  },
  deviceContentContainer: {
    flex: 1,
    justifyContent: "center",
    marginLeft: scale * 30,
  },
  image: {
    height: scale * 120,
    width: scale * 100,
  },
  devicename: {
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
    fontWeight: "bold",
  },
  textdesc: {
    color: Color.text_assist,
    fontSize: FontSize.SIZE_12,
    marginTop: scale * 6,
  },
  textLogo: {
    color: Color.text_desc,
    fontSize: FontSize.SIZE_14,
  },
  textPrice: {
    color: Color.text_price,
    fontSize: FontSize.SIZE_32,
    marginLeft: scale * 8,
  },
  buttonText: {
    fontSize: FontSize.SIZE_17,
    color: Color.tab_yellow,
  },
  button: {
    height: 44 * scale,
    width: ScreenWidth - 64 * scale,
    marginLeft: 32 * scale,
    marginTop: 32 * scale,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.white,
    borderWidth: 1,
    borderColor: Color.tab_yellow,
    borderRadius: scale * 5,
  },
});
